<template>
	<div class="smart_login">
		<div class="smart_login_title">人民防空方案计划数据管理系统</div>
		<div class="smart_login_container">
			<div class="smart_login_left">
				<div class="item" style="--i:-1">人防指挥系统</div>
				<div class="item" style="--i:0">医疗保障系统</div>
				<div class="item" style="--i:1">交通运输系统</div>
				<div class="item" style="--i:2">政治工作计划</div>
				<div class="item" style="--i:3">交通运输、物资保障</div>
			</div>
			<div class="smart_login_right">
				<p>Welcome Login</p>
				<div class="login_from_user">
					<span style="color: #fff;"><el-icon>
							<Avatar />
						</el-icon></span>
					<span class="item_span">账号</span>
				</div>
				<div style="height: 38px;">
					<el-input placeholder="请输入账号" v-model="username" @keyup.enter.native="signHome"></el-input>
				</div>
				<div class="login_from_pass">
					<span style="color: #fff;"><el-icon>
							<Lock />
						</el-icon>
					</span>
					<span class="item_span">密码</span>
				</div>
				<div style="height: 38px;">
					<el-input placeholder="请输入密码" type="password" v-model="password" @keyup.enter.native="signHome"
						show-password></el-input>
				</div>
				<div class="submit_btn" @click.native.prevent="signHome">登录</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		useRouter
	} from 'vue-router'

	import {
		login
	} from '@/api/login/login.js'

	import {
		useStore
	} from '@/store/store'

	import {
		ElMessage
	} from "element-plus"

	const store = useStore()
	const username = ref('')
	const password = ref('')
	const router = useRouter()
	const signHome = () => {
		if (username.value == '' || password.value == '') {
			return ElMessage.error('账号密码不能为空!')
		}
		login({
			username: username.value,
			password: password.value
		}).then(result => {
			if (result.code === 200) {
				store.token = result.token
				store.userName = username.value
				localStorage.setItem('token',result.token)
				ElMessage({
					type: 'success',
					message: "登录成功!",
					duration: 700
				})
				setTimeout(() => {
					router.replace('/rf/organize/headquarters')
				}, 700)
			} else {
				ElMessage.error(result.msg)
			}
		})
	}
</script>

<style lang="scss" scoped>
	@import "@/assets/css/login.scss";
</style>